<template>
	<div :class="['h-input',statusClass[status]]">
		<label>
			<input
					:type="inputType"
					v-bind="$attrs"
					:value="value"
					title=""
					@input="inputChange($event)"
					@blur="validator"
			/>
		</label>
		<span v-if="type==='password'" :class="['iconfont',passwordEyes]" @click="lookPassword"></span>
		<span v-else-if="icon" :class="['iconfont',icon]"></span>
		<span v-else class="h-input-slot"><slot></slot></span>
		<p class="h-input-info">{{hintInfo}}</p>
	</div>
</template>

<script>
	const typeArr = ['text', 'password', 'tel', 'email'];
	export default {
		name: "Input",
		props: {
			type: {
				type: String,
				default: 'text',
				validator(value) {
					return typeArr.indexOf(value) >= 0;
				}
			},
			icon: {
				type: String,
				default: ''
			},
			value: {
				type: [String, Number],
				required: true
			},
			required: {
				type: Boolean,
				default: false
			},
			rules: {
				type: Function
			},
			offRules: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				status: 0,
				statusClass: ['default', 'success', 'error'],
				inputType: this.type,
				passwordEyes: 'icon-eyes-closed'
			}
		},
		computed: {
			hintInfo() {
				if (this.required && this.value === '') {
					return '必填';
				}
				return '';
			}
		},
		methods: {
			inputChange(e) {
				this.$emit('input', e.target.value);
			},
			validator() {
				if (this.required && this.value === '') {
					this.status = 2;
					return false;
				} else if (this.rules && !this.offRules) {
					let status = this.rules(this.value);
					this.status = status ? 1 : 2;
					return status;
				} else if (this.value !== '' && !this.rules && !this.offRules) {
					this.status = 1;
					return true;
				} else if (this.offRules) {
					this.status = 0;
					return true;
				}
				{
					this.status = 0;
					return true;
				}
			},
			lookPassword() {
				if (this.passwordEyes === 'icon-eyes-closed') {
					this.passwordEyes = 'icon-eyes';
					this.inputType = 'text';
				} else {
					this.passwordEyes = 'icon-eyes-closed';
					this.inputType = 'password';
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "../../assets/css/_function";

	.h-input {
		align-items: center;
		justify-content: space-between;
		padding: 0 pr(45);
		border-radius: pr(15);
		box-sizing: border-box;
		color: #cccccc;
		display: flex;
		height: pr(140);
		position: relative;
		margin-bottom: pr(50);
		width: 100%;
		&.default {
			background: #f5f5f5;
			border: 1px solid #f5f5f5;
		}
		&.success {
			background: #e1ffdf;
			border: 1px solid #38db24;
		}
		&.error {
			background: #ffe9e4;
			border: 1px solid #e12c1e;
			animation: shake .1s 3;
			& > .h-input-info {
				display: block;
			}
		}
		& > .h-input-info {
			display: none;
			position: absolute;
			right: pr(120);
			font-size: pr(35);
			color: #e12c1e;
		}
		& > .iconfont {
			float: right;
			font-size: pr(50);
			margin-left: pr(10);
			&.icon-eyes, &.icon-eyes-closed {
				font-size: pr(70);
			}
		}
		& > .h-input-slot {
			max-width: 60%;
			height: 100%;
			overflow: hidden;
			margin-right: pr(-40);
			img {
				width: 100%;
				height: 100%;
			}
		}
		@keyframes shake {
			from {
				transform: translate3d(2%, 1px, 0);
			}
			to {
				transform: translate3d(-2%, 1px, 0);
			}
		}
		label {
			flex: 1;
			& > input {
				border: none;
				background: none;
				font-size: pr(42);
				letter-spacing: 1px;
				width: 100%;
				height: 100%;
				position: relative;
				&::placeholder {
					color: #919191;
				}
			}
		}
	}
</style>
